<template>
  <el-form
    ref="form"
    :model="form"
    label-width="99px"
    :hide-required-asterisk="true"
  >
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>基本信息</span>
      </div>
      <el-row style="margin-left: 21px">
        <el-col :span="8">
          <el-form-item
            label="预案类型"
            prop="PlanType"
            label-position="left"
            :rules="[
              {
                required: true,
                message: '预案类型不能为空',
                trigger: 'blur',
              },
            ]"
          >
            <span class="IsMust">*</span>
            <!-- <el-input v-model="form.PlanType" placeholder="请输入预案类型" /> -->
            <el-select
              :disabled="titleDisabled"
              v-model="form.PlanType"
              placeholder="请选择预案类型"
              style="margin-left: 10px; width: 77%"
            >
              <el-option
                v-for="item in PlanTypeDropdownBox"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="预案名称"
            prop="PlanName"
            :rules="[
              {
                required: true,
                message: '请输入预案名称',
                trigger: 'blur',
              },
              {
                validator: (rule, value, callback) =>
                  this.checkPlanNameUnique(rule, value, callback),
                trigger: 'blur',
              },
            ]"
          >
            <span class="IsMust">*</span>
            <el-input
              :disabled="titleDisabled"
              v-model="form.PlanName"
              placeholder="请输入预案名称"
              style="margin-left: 10px; width: 77%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="事故风险" prop="AccidentRisk">
            <el-input
              :disabled="titleDisabled"
              style="margin-left: 10px; width: 77%"
              v-model="form.AccidentRisk"
              placeholder="请输入事故风险"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="margin-left: 21px">
        <el-col :span="8">
          <el-form-item label="响应等级" prop="Responselevel">
            <el-select
              :disabled="titleDisabled"
              v-model="form.Responselevel"
              placeholder="请选择响应等级"
              @change="updateGradeName"
              style="width: 77%; margin-left: 10px"
            >
              <el-option
                v-for="item in Responselevellist"
                :key="item.grade"
                :label="item.grade"
                :value="item.grade"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="等级名称" prop="Gradename">
            <el-input
              disabled
              v-model="form.Gradename"
              placeholder="请输入等级名称"
              style="width: 77%; margin-left: 10px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="事故类型" prop="AccidentType">
            <el-select
              :disabled="titleDisabled"
              v-model="form.AccidentType"
              multiple
              placeholder="请选择事故类型"
              style="margin-left: 10px; width: 77%"
            >
              <el-option
                v-for="item in Listofaccidenttypes"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <!-- <el-select
              style="margin-left: 10px; width: 77%"
              v-model="form.AccidentType"
              multiple
              placeholder="请选择事故类型"
            >
              <el-option
                v-for="item in Listofaccidenttypes"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select> -->
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="可能发生时间" prop="PossibleTime">
            <el-input
              :disabled="titleDisabled"
              style="margin-left: 10px; width: 77%"
              v-model="form.PossibleTime"
              placeholder="请输入可能发生时间"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="可能发生区域" prop="PossibleOccurArea">
            <el-input
              :disabled="titleDisabled"
              style="margin-left: 10px; width: 77%"
              v-model="form.PossibleOccurArea"
              placeholder="请输入可能发生区域"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="可能严重程度" prop="PossibleSeverity">
            <el-input
              :disabled="titleDisabled"
              style="margin-left: 10px; width: 77%"
              v-model="form.PossibleSeverity"
              placeholder="请输入可能严重程度"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="margin-left: 21px">
        <el-col :span="8">
          <el-form-item label="可能联动范围" prop="Possiblelinkage">
            <el-select
              :disabled="titleDisabled"
              v-model="form.Possiblelinkage"
              multiple
              placeholder="请选择可能联动范围"
              style="margin-left: 10px; width: 77%"
              class="max-four-tags"
            >
              <el-option
                style=""
                v-for="item in Listofpossiblelinkageranges"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="isOptionDisabled(item.value)"
                @click.native.stop.prevent="handleOptionClick"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="可能影响范围" prop="PossibleEffectScope">
            <el-input
              :disabled="titleDisabled"
              style="margin-left: 10px; width: 77%"
              v-model="form.PossibleEffectScope"
              placeholder="请输入可能影响范围"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="可能衍生事故" prop="PossibleMatter">
            <el-input
              :disabled="titleDisabled"
              style="margin-left: 10px; width: 77%"
              v-model="form.PossibleMatter"
              placeholder="请输入可能衍生事故"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row style="margin-left: 21px">
        <el-col :span="8">
          <el-form-item label="事故发生范围" prop="AccidentScope">
            <el-input
              :disabled="titleDisabled"
              style="margin-left: 10px; width: 77%"
              v-model="form.AccidentScope"
              placeholder="请输入事故发生范围（全厂/某产线）"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="事故发生区域" prop="AccidentArea">
            <el-input
              disabled
              style="margin-left: 10px; width: 77%"
              v-model="form.AccidentArea"
              placeholder="请输入事故发生区域"
            />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="事故发生设备" prop="AccidentPoint">
            <el-input
              disabled
              style="margin-left: 10px; width: 77%"
              v-model="form.AccidentPoint"
              placeholder="请输入事故发生设备"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="margin-left: 21px">
        <el-col :span="8">
          <el-form-item label="预案注意事项" prop="Notes">
            <el-popover placement="top-start" width="300" trigger="click">
              <el-input
                class="borderNone"
                v-model="form.Notes"
                type="textarea"
                autosize
                size="medium"
                resize="none"
              />
              <template slot="reference">
                <el-input
                  :disabled="titleDisabled"
                  style="margin-left: 10px; width: 77%"
                  v-model="form.Notes"
                  placeholder="请输入注意事项"
                />
              </template>
            </el-popover>
          </el-form-item>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>事故预警征兆</span>
      </div>
      <el-col :span="8" style="margin-left: 21px">
        <el-form-item label="事故预警征兆" prop="AccidentWarnSign">
          <el-popover placement="top-start" width="300" trigger="click">
            <el-input
              class="borderNone"
              v-model="form.AccidentWarnSign"
              type="textarea"
              autosize
              size="medium"
              resize="none"
            />
            <!-- <div contenteditable @input="AcchandleInput">
              {{ form.AccidentWarnSign }}
            </div> -->
            <template slot="reference">
              <el-input
                :disabled="titleDisabled"
                style="width: 77%; margin-left: 9px"
                v-model="form.AccidentWarnSign"
                placeholder="请输入事故征兆"
              />
            </template>
          </el-popover>
        </el-form-item>
      </el-col>
      <el-col :span="8" style="margin-left: -5px">
        <el-form-item label="征兆处置措施" prop="AccidentWarnDeal">
          <el-popover placement="top-start" width="300" trigger="click">
            <el-input
              v-model="form.AccidentWarnDeal"
              class="borderNone"
              type="textarea"
              autosize
              size="medium"
              resize="none"
            />
            <!-- <div contenteditable @input="WarnDealandleInput">
              {{ form.AccidentWarnDeal }}
            </div> -->
            <template slot="reference">
              <el-input
                :disabled="titleDisabled"
                style="width: 76%; margin-left: 9px"
                v-model="form.AccidentWarnDeal"
                placeholder="请输入征兆处置措施"
              />
            </template>
          </el-popover>
        </el-form-item>
      </el-col>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>具体步骤</span>
      </div>
      <el-card
        class="box-card"
        v-for="(Activity, disposalIndex) in ActivityAreaList"
        :key="disposalIndex"
        style="margin-top: 20px"
        v-loading="loding"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <el-row>
          <el-col :span="6">
            <div style="display: flex">
              <div
                style="
                  line-height: 36px;
                  font-size: 14px;
                  color: #606266;
                  font-weight: 700;
                  margin-right: 10px;
                "
              >
                区域/设备
              </div>
              <el-select
                :disabled="titleDisabled"
                clearable
                v-model="Activity.zoneofaction"
                placeholder="请选择区域/设备"
                style="width: 170px"
              >
                <el-option label="区域" value="区域"></el-option>
                <el-option label="设备" value="设备"></el-option>
              </el-select>
              <div style="margin-left: 1%">
                <el-button
                  type="text"
                  icon="el-icon-plus"
                  v-if="disposalIndex === ActivityAreaList.length - 1"
                  @click="addArea(disposalIndex)"
                  circle
                ></el-button>
              </div>
              <div style="margin-left: 1%">
                <el-button
                  type="text"
                  icon="el-icon-minus"
                  @click="removedArea(disposalIndex)"
                  circle
                ></el-button>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div style="display: flex">
              <div
                style="
                  line-height: 36px;
                  font-size: 14px;
                  color: #606266;
                  font-weight: 700;
                  width: 101px;
                "
              >
                区域/设备名称
              </div>
              <el-input
                :disabled="titleDisabled"
                v-model="Activity.AccidentArea"
                autocomplete="off"
                placeholder="请输入区域/设备名称"
                style="width: 284px"
              ></el-input>
            </div>
          </el-col>
          <el-col :span="5">
            <div style="display: flex;width: 1100px;" >
              <div
                style="
                  line-height: 36px;
                  font-size: 14px;
                  color: #606266;
                  font-weight: 700;
                  width: 93px;
                "
              >
                处置措施名称
              </div>
              <el-input
                :disabled="titleDisabled"
                v-model="Activity.MeasureName"
                placeholder="请输入处置措施名称"
                autocomplete="off"
                style="width: 284px"
              ></el-input>
            </div>
          </el-col>
        </el-row>

        <!-- 序号 -->
        <el-row style="margin-top: 30px">
          <el-col :span="4">
            <el-card class="box-card1">
              <div slot="header" class="clearfix">
                <span>处置序号</span>
                <el-button
                  style="float: right; padding: 3px 0"
                  type="text"
                  @click="addDisposal(disposalIndex)"
                  >+</el-button
                >
              </div>
              <div
                v-for="(Disposal, index) in Activity.Disposalserialnumber"
                :key="index"
              >
                <div
                  :style="{
                    width: '112%',
                    marginLeft: '-20px',
                    textAlign: 'center',
                    lineHeight: '42px',
                    paddingLeft: '17px',
                    display: 'flex',
                    lineHeight: '36px',
                    // justifyContent: 'space-between',
                    backgroundColor:
                      Activity.currentDisposal === index
                        ? 'rgb(153 153 154 / 19%)'
                        : 'initial',
                    color:
                      Activity.currentDisposal === index
                        ? '#038ff3'
                        : 'initial',
                    cursor: 'pointer',
                  }"
                  @click="showCard(disposalIndex, index)"
                >
                  <div
                    style="
                      display: flex;
                      justify-content: space-between;
                      width: 200px;
                      margin-left: 20px;
                    "
                  >
                    NO.{{ index + 1 }}
                    <el-button
                      type="text"
                      @click="removeDisposal(disposalIndex, index)"
                      >-</el-button
                    >
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="19" style="margin-left: 30px;">
            <el-card v-if="isCardVisible">
              <div
                v-for="(Disposal, index) in Activity.Disposalserialnumber"
                :key="index"
                v-show="Activity.currentDisposal === index"
              >
                <!-- 预案处理步骤和处理人员内容 -->
                <div style="display: flex">
                  <div
                    style="
                      line-height: 36px;
                      font-size: 14px;
                      color: #606266;
                      font-weight: 700;
                      margin-right: 10px;
                    "
                  >
                    处置步骤
                  </div>
                  <el-select
                    :disabled="titleDisabled"
                    v-model="Disposal.DealStep"
                    placeholder="请选择预案处理步骤"
                  >
                    <el-option
                      v-for="item in Planprocessingstepsliest"
                      :key="item"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                </div>

                <div
                  style="margin-top: 30px"
                  v-for="(item, itemIndex) in Disposal.divContents"
                  :key="itemIndex"
                >
                  <div style="display: flex">
                    <div
                      style="
                        line-height: 36px;
                        font-size: 14px;
                        color: #606266;
                        font-weight: 700;
                        margin-right: 10px;
                      "
                    >
                      处理人员
                    </div>
                    <el-select
                      v-model="item.DealExecutor"
                      :disabled="titleDisabled"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="person in Processingpersonnelliest"
                        :key="person"
                        :label="person"
                        :value="person"
                      ></el-option>
                    </el-select>
                    <div style="margin-left: 1%">
                      <el-button
                        type="primary"
                        plain
                        v-if="itemIndex === Disposal.divContents.length - 1"
                        @click="
                          addContentWithDealExecutor(
                            disposalIndex,
                            index,
                            itemIndex
                          )
                        "
                        >+</el-button
                      >
                    </div>
                    <div style="margin-left: 1%">
                      <el-button
                        type="danger"
                        plain
                        @click="removeContent(disposalIndex, index, itemIndex)"
                        >-</el-button
                      >
                    </div>
                  </div>
                  <div
                    style="
                      display: flex;
                      flex-wrap: wrap;
                      width: 1270px;
                      margin-left: 30px;
                    "
                  >
                    <div
                      v-for="(content, contentIndex) in item.contents"
                      :key="contentIndex"
                      style="
                        display: flex;
                        flex-wrap: wrap;
                        margin-top: 25px;
                        width: 559px;
                        margin-left: 6px;
                      "
                    >
                      <div style="line-height: 34px">
                        {{ contentIndex + 1 }}.
                      </div>

                      <el-popover
                        placement="top-start"
                        width="300"
                        trigger="click"
                      >
                        <el-input
                          class="borderNone"
                          type="textarea"
                          autosize
                          size="medium"
                          resize="none"
                          v-model="content.value"
                          :autosize="{ minRows: 2, maxRows: 20 }"
                          @input="
                            updateContent(
                              disposalIndex,
                              index,
                              itemIndex,
                              contentIndex
                            )
                          "
                        ></el-input>
                        <template slot="reference">
                          <el-input
                            :disabled="titleDisabled"
                            :rows="1"
                            placeholder="请输入处置内容"
                            v-model="content.value"
                            @input="
                              updateContent(
                                disposalIndex,
                                index,
                                itemIndex,
                                contentIndex
                              )
                            "
                            style="margin-left: 20px; width: 159%"
                          ></el-input>
                        </template>
                      </el-popover>
                      <div style="margin-left: 28%">
                        <el-button
                          v-if="contentIndex === item.contents.length - 1"
                          type="primary"
                          plain
                          @click="
                            addContents(
                              disposalIndex,
                              index,
                              itemIndex,
                              contentIndex
                            )
                          "
                          >+</el-button
                        >
                      </div>
                      <div style="margin-left: 1%">
                        <el-button
                          v-if="contentIndex === item.contents.length - 1"
                          type="danger"
                          plain
                          @click="
                            removeContents(
                              disposalIndex,
                              index,
                              itemIndex,
                              contentIndex
                            )
                          "
                          >-</el-button
                        >
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-card>
    </el-card>
  </el-form>
</template>
<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
export default {
  // eslint-disable-next-line vue/no-unused-components
  components: {},
  props: ["form", "ActivityAreaList", "parentPlanName", "loding", "title"],
  data() {
    return {
      isCardVisible: true,
      // 处理人员列表
      Processingpersonnelliest: [
        "第一目击者",
        "现场人员",
        "现场调度",
        "安全人员",
      ],
      // 预案处理步骤列表
      Planprocessingstepsliest: [
        "发出警报",
        "第一时间处置",
        "指挥救援",
        "现场急救",
        "善后处置",
      ],
      // 响应等级下拉框
      Responselevellist: [
        {
          grade: "III级",
          name: "班组级",
        },
        {
          grade: "II级",
          name: "公司级",
        },
        {
          grade: "I级",
          name: "社会级",
        },
      ],
      // 事故类型下拉框
      Listofaccidenttypes: [
        {
          value: "火灾",
          label: "火灾",
        },
        {
          value: "爆炸",
          label: "爆炸",
        },
        {
          value: "熔融金属爆炸",
          label: "熔融金属爆炸",
        },
        {
          value: "煤粉粉尘爆炸",
          label: "煤粉粉尘爆炸",
        },
        {
          value: "锅炉爆炸",
          label: "锅炉爆炸",
        },
        {
          value: "容器爆炸",
          label: "容器爆炸",
        },
        {
          value: "起重伤害",
          label: "起重伤害",
        },
        {
          value: "灼烫伤害",
          label: "灼烫伤害",
        },
        {
          value: "化学灼伤",
          label: "化学灼伤",
        },
        {
          value: "机械伤害",
          label: "机械伤害",
        },
        {
          value: "触电伤害",
          label: "触电伤害",
        },
        {
          value: "物体打击",
          label: "物体打击",
        },
        {
          value: "车辆伤害",
          label: "车辆伤害",
        },
        {
          value: "坍塌",
          label: "坍塌",
        },
        {
          value: "淹溺",
          label: "淹溺",
        },
        {
          value: "高温危害",
          label: "高温危害",
        },
        {
          value: "低温冻伤",
          label: "低温冻伤",
        },
        {
          value: "噪声",
          label: "噪声",
        },
        {
          value: "中毒窒息",
          label: "中毒窒息",
        },
        {
          value: "粉尘危害",
          label: "粉尘危害",
        },
        {
          value: "电离辐射",
          label: "电离辐射",
        },
        {
          value: "自然灾害",
          label: "自然灾害",
        },
      ],
      // 预案类型下拉框
      PlanTypeDropdownBox: ["现场处置方案", "专项应急预案", "综合应急预案"],
      // 可能联动范围下拉框
      Listofpossiblelinkageranges: [
        {
          value: "ERT集结",
          label: "ERT集结",
        },
        {
          value: "区域疏散",
          label: "区域疏散",
        },
        {
          value: "全员疏散",
          label: "全员疏散",
        },
        {
          value: "周边企业",
          label: "周边企业",
        },
        {
          value: "外部专业救援队伍",
          label: "外部专业救援队伍",
        },
        {
          value: "无",
          label: "无",
        },
      ],
      isDisabled: false,
    };
  },
  // 计算属性 类似于data概念
  computed: {
    // 标题
    titleDisabled() {
      return this.title === "修改"; // 判断标题是否为"修改"
    },
    paginatedItems() {
      const startIndex = (this.currentPage - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;
      return this.filteredItems.slice(startIndex, endIndex);
    },
    totalPages() {
      return Math.ceil(this.filteredItems.length / this.pageSize);
    },
    // 事故类型下拉框
    // selectedOptions: {
    //   get() {
    //     // console.log(this.form.AccidentType);
    //     // 检查是否为空字符串，如果是，则返回空数组
    //     if (this.form.AccidentType === null) {
    //       return ["无"];
    //     }
    //     // 否则，将以逗号分隔的字符串转换为数组
    //     return this.form.AccidentType.split(",");
    //   },
    //   set(value) {
    //     // 将选中的值组合为逗号分隔的字符串
    //     this.form.AccidentType = value.join(",");
    //   },
    // },
    // // 可能联动范围下拉框
    // rangeOptions: {
    //   get() {
    //     // 检查是否为空字符串，如果是，则返回空数组
    //     if (this.form.Possiblelinkage === null) {
    //       return [];
    //     }
    //     // 否则，将以逗号分隔的字符串转换为数组
    //     return this.form.Possiblelinkage.split(",");
    //   },
    //   set(value) {
    //     // 将选中的值组合为逗号分隔的字符串
    //     this.form.Possiblelinkage = value.join(",");
    //   },
    // },
  },
  // 监控data中的数据变化
  watch: {
    "form.Possiblelinkage": function (newVal) {
      if (newVal.length > 0 && newVal.includes("无")) {
        this.isDisabled = false; // 如果选中的值数组中包含第一个选项，则禁用第一个选项
      } else {
        this.isDisabled = true; // 否则解禁第一个选项
      }
    },
  },
  // 方法集合
  methods: {
    // 事故征兆
    AcchandleInput(event) {
      console.log(event);
      this.form.AccidentWarnSign = event.target.innerText;
    },
    // 征兆措施
    WarnDealandleInput(event) {
      this.form.AccidentWarnDeal = event.target.innerText;
    },
    // 处置内容
    contenthandleInput(event) {
      this.form.Notes = event.target.innerText;
    },
    // 预案注意事项
    handleContentInput(event) {
      console.log(event.target.innerText);
      this.form.Notes = event.target.innerText; // 将内容的变化同步到输入框的数据中
    },
    handleOptionClick() {
      this.$nextTick(() => {
        // 更新 el-tag 的显示
        this.updateTagDisplay();
      });
    },
    updateTagDisplay() {
      const tags = document.querySelectorAll(".max-four-tags .el-tag");
      for (let i = 0; i < tags.length; i++) {
        if (i < 3) {
          // 前四个 tag 显示出来
          tags[i].style.display = "inline-block";
        } else {
          // 超过四个 tag 隐藏起来
          tags[i].style.display = "none";
        }
      }
    },
    // 可能联动范围
    isOptionDisabled(option) {
      if (this.form.Possiblelinkage != null) {
        if (this.form.Possiblelinkage.length === 0) {
          return false; // 如果多选框为空，不禁用任何选项
        }
        if (option === "无" && this.isDisabled) {
          // console.log(111);
          return true; // 如果点击了第一个值且 isDisabled 为 true，禁用该选项
        }
        if (option !== "无" && !this.isDisabled) {
          // console.log(222);
          return true; // 如果点击了非第一个值且 isDisabled 为 false，禁用非第一个选项
        }
        return false; // 其他情况不禁用选项
      }
    },
    // 校验
    checkPlanNameUnique(rule, value, callback) {
      for (let index = 0; index < this.parentPlanName.length; index++) {
        const element = this.parentPlanName[index];
        if (value === element.PlanName) {
          this.$message.error("预案名称已存在");
        }
      }
    },
    // 活动区域+
    addArea(ActivityIndex) {
      const newActivity = {
        zoneofaction: "",
        AccidentArea: "",
        MeasureName: "",
        // 新增添加左边默认选中list第一个元素
        currentDisposal: 0,
        Disposalserialnumber: [
          {
            DealStep: "",
            divContents: [
              {
                DealExecutor: "",
                contents: [{ value: "" }],
              },
            ],
          },
        ],
      };
      // this.ActivityAreaList.splice(ActivityIndex + 1, 0, newActivity);
      this.ActivityAreaList.push(newActivity);
    },
    // 活动区域-
    removedArea(ActivityIndex) {
      if (this.ActivityAreaList.length > 1) {
        this.ActivityAreaList.splice(ActivityIndex, 1);
      }
    },
    addDisposal(ActivityIndex) {
      const newDisposal = {
        index:
          this.ActivityAreaList[ActivityIndex].Disposalserialnumber.length + 1,
        DealStep: "",
        divContents: [
          {
            DealExecutor: "",
            contents: [{ value: "" }],
          },
        ],
      };
      this.ActivityAreaList[ActivityIndex].Disposalserialnumber.push(
        newDisposal
      ); // 将新的处置添加到数组中
    },
    removeDisposal(ActivityIndex, index) {
      this.ActivityAreaList[ActivityIndex].Disposalserialnumber.splice(
        index,
        1
      ); // 从数组中删除指定序号的处置
      if (this.currentDisposal === index) {
        this.isCardVisible = false;
        this.currentDisposal = 0;
      }
    },
    showCard(ActivityIndex, index) {
      // 把index提到数组对象里面控制左边的切换
      this.ActivityAreaList[ActivityIndex].currentDisposal = index;
      this.isCardVisible = true;
    },
    // 处理人员+
    addContentWithDealExecutor(ActivityIndex, disposalIndex, contentIndex) {
      const newItem = {
        DealExecutor: "",
        contents: [{ value: "" }],
      };
      this.ActivityAreaList[ActivityIndex].Disposalserialnumber[
        disposalIndex
      ].divContents.splice(contentIndex + 1, 0, newItem);
    },
    // 处理人员-
    removeContent(ActivityIndex, disposalIndex, contentIndex) {
      if (
        this.ActivityAreaList[ActivityIndex].Disposalserialnumber[disposalIndex]
          .divContents.length > 1
      ) {
        this.ActivityAreaList[ActivityIndex].Disposalserialnumber[
          disposalIndex
        ].divContents.splice(contentIndex, 1);
      }
    },
    // 处置内容输入框内容
    updateContent(ActivityIndex, disposalIndex, contentIndex, innerIndex) {
      const content =
        this.ActivityAreaList[ActivityIndex].Disposalserialnumber[disposalIndex]
          .divContents[contentIndex].contents[innerIndex];
    },
    // 处置内容+
    addContents(ActivityIndex, disposalIndex, contentIndex, innerIndex) {
      const newContent = { value: "" };
      const contents =
        this.ActivityAreaList[ActivityIndex].Disposalserialnumber[disposalIndex]
          .divContents[contentIndex].contents;
      // 检查当前内容数量是否已经达到上限
      if (contents.length >= 20) {
        this.$message.error("内容数量已达到上限");
        return;
      }
      // console.log(newContent.value.length);
      // // 检查新内容的长度是否超过了限制
      // if (newContent.value.length > 4000) {
      //   this.$message.error("内容长度超过限制");
      //   return;
      // }
      contents.splice(innerIndex + 1, 0, newContent);
    },
    // 处置内容-
    removeContents(ActivityIndex, disposalIndex, contentIndex, innerIndex) {
      if (
        this.ActivityAreaList[ActivityIndex].Disposalserialnumber[disposalIndex]
          .divContents[contentIndex].contents.length > 1
      ) {
        this.ActivityAreaList[ActivityIndex].Disposalserialnumber[
          disposalIndex
        ].divContents[contentIndex].contents.splice(innerIndex, 1);
      }
    },
    // 响应等级
    updateGradeName() {
      const selectedGrade = this.form.Responselevel;
      const selectedLevel = this.Responselevellist.find(
        (item) => item.grade === selectedGrade
      );
      // console.log(this.form.AccidentType);
      this.form.Gradename = selectedLevel ? selectedLevel.name : "";
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    if (this.form.Possiblelinkage!=null) {
       for (let index = 0; index < this.form.Possiblelinkage.length; index++) {
      const element = this.form.Possiblelinkage[index];
      if (this.form.Possiblelinkage.length > 0 && element.includes("无")) {
        this.isDisabled = false; // 如果选中的值数组中包含第一个选项，则禁用第一个选项
      } else {
        this.isDisabled = true; // 否则解禁第一个选项
      }
    }
    }
   
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
.box-card {
  margin-top: 3%;
}

::v-deep .el-form-item__label {
  text-align: left;
}

// display: flex;
// justify-content: center;
.IsMust {
  position: absolute;
  color: #f56c6c;
  // 位置可以根据自己的样式自行调整
  top: -1px;
  left: -38px;
}

.box-card1 {
  ::v-deep .el-card__body {
    padding: 0;
  }
}

.borderNone ::v-deep .el-textarea__inner {
  border: none;
  height: 100%;
}

::v-deep .el-select__tags {
  max-width: 100% !important;
  /* 设置宽度为200px, !important 是为了确保优先级 */
  height: 33px;
}

.max-four-tags .el-tag {
  display: none;
  /* 默认隐藏所有的 tag */
}

.max-four-tags .el-tag:nth-child(-n + 4) {
  display: inline-block;
  /* 前四个 tag 显示出来 */
}
</style>
